<template>
	<div>
		<div class="container">
			<div v-for="e in infoData.productList" class="container_item1">
				<ACollapse :open="true" style="width: 100%">
					<template #title>
						<div class="container_title">
							{{
								(e.plan && e.plan.carModelName) ||
								`车型${index + 1}`
							}}
						</div>
					</template>

					<div class="container_item">
						<div class="item item1">
							<div class="label">
								{{ e.plan.carModelName ? '车型' : '车辆' }}
							</div>
							<div class="content">
								{{
									e.plan.carModelName ||
									e.plan.carPlateNo ||
									'-'
								}}
							</div>
						</div>
						<div class="item">
							<div class="label">指导价</div>
							<div class="content">
								{{
									format_thousand(e.plan.carGuidePrice) || '-'
								}}
							</div>
						</div>
						<div class="item">
							<div class="label">租赁期(月)</div>
							<div class="content">
								{{ e.plan.planTenancyType || '-' }}
							</div>
						</div>
						<div class="item">
							<div class="label">支付频率</div>
							<div class="content">
								{{
									e.plan.planPaymentFrequencyType
										| planPaymentFrequencyType(
											dict.type
												.quota_plan_payment_frequency_type,
										)
								}}
							</div>
						</div>
						<div class="item">
							<div class="label">起租日期</div>
							<div class="content">
								{{ A_formatTime(e.plan.planTimeStart) }}
							</div>
						</div>
						<div class="item">
							<div class="label">保证金</div>
							<div class="content">
								{{
									format_thousand(
										e.plan.planContractCashdeposit,
									)
								}}
							</div>
						</div>
						<div class="item">
							<div class="label">首期租金</div>
							<div class="content">
								{{ format_thousand(e.plan.planFirstRent) }}
							</div>
						</div>
						<div class="item">
							<div class="label">每期租金(含税)</div>
							<div class="content">
								{{ format_thousand(e.plan.planRent) }}
							</div>
						</div>
					</div>
					<div
						v-if="e._prevList && e._prevList.length > 0"
						class="container_time-box">
						<div class="header">
							<div class="cell">期数</div>
							<div class="cell">支付日期</div>
							<div class="cell">每期租金(含税)</div>
						</div>
						<div class="body">
							<div
								class="container_time"
								v-for="item in e._prevList">
								<div class="cell">
									{{ item.periodsNum || '-' }}
								</div>
								<div class="cell">
									{{ item.billingDate || '-' }}
								</div>
								<div class="cell">
									{{ item.rentPaymentPerPeriod || '-' }}
								</div>
							</div>
						</div>
					</div>
				</ACollapse>
			</div>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import * as utils from '@/pages/quota/libs/utils.js';
	export default {
		props: {
			state: {
				required: false,
			},
			type: {
				required: false,
			},
			value: {
				required: false,
			},
		},
		dicts: ['quota_plan_payment_frequency_type'],
		components: {},
		data() {
			return {
				infoData: {},
			};
		},
		filters: {
			planPaymentFrequencyType(value, list) {
				if (
					value === undefined ||
					value === null ||
					value === '' ||
					list?.length == 0
				)
					return '-';

				let item = list?.find(e => e.value == value);
				if (item) {
					return item.label;
				} else {
					return '-';
				}
			},
		},
		computed: {},
		created() {},
		mounted() {
			this.infoData = this.value;
			this.getData();
		},
		methods: {
			dataload() {
				this.infoData = this.value;
				this.getData();
			},
			getTotalPrice(row) {
				let p = 0;

				let monthlyRent = utils.toNumberExcept(
					row?.plan?.planRent,
					row?.plan?.planPaymentFrequencyType,
				);
				if (monthlyRent && row?.plan?.planTenancyType) {
					p =
						utils.toNumberRide(
							monthlyRent,
							row?.plan?.planTenancyType,
						) * 1;
				}
				if (this.value.rentType_raw == '1') {
					return p;
				} else {
					let price =
						p +
						(row?.plan?.planBalancepayment * 1 ?? 0) +
						(row?.plan?.planFirstRent * 1 ?? 0);
					return isNaN(price) ? '-' : price;
				}
			},
			getData() {
				if (this.value.productList?.length == 0) return;
				let params = [];
				this.infoData.productList?.map(item => {
					params.push({
						planFirstRent: item?.plan?.planFirstRent ?? 0,
						pid: item.sequenceNumber,
						leaseTerm: item.plan?.planTenancyType ?? 0,
						rentPaymentPerPeriod: item.plan.planRent ?? 0,
						paymentDate: this.A_formatTime(
							item.plan.planTimeStart,
							0,
						),
						finalPayment: item?.plan?.planBalancepayment ?? 0,
						planPaymentMethodType:
							item?.plan?.planPaymentMethodType,
						frequency: item?.plan?.planPaymentFrequencyType,
					});
				});
				apis?.RentPaymentPreview(params)
					.then(res => {
						if (res.code == 200) {
							this.infoData?.productList?.map(item => {
								if (this.notEmpty(res.data)) {
									for (const [key, value] of Object.entries(
										res.data,
									)) {
										if (item.sequenceNumber == key) {
											let filterValue =
												this.A_deepClone(value);
											if (
												this.value?.rentType_raw == '1'
											) {
												filterValue = value
													.map(item => {
														if (
															item.periodsNum !==
																'首期租金' &&
															item.periodsNum !==
																'尾款'
														) {
															return item;
														}
													})
													?.filter(e => !!e);
											}

											let index = filterValue?.findIndex(
												e => e?.periodsNum == '合计',
											);
											if (index >= 0) {
												filterValue.splice(index, 1);
											}

											filterValue.push({
												periodsNum: '合计',
												billingDate: '',
												rentPaymentPerPeriod:
													this.getTotalPrice(item),
											});
											// item._prevList = filterValue;
											this.$set(
												item,
												'_prevList',
												filterValue,
											);
										}
									}
								}
							});
						}
					})
					.catch(err => {
						console.log(err);
					})
					.finally(() => {});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		border-radius: 8px;
		margin: 0 20rpx;
	}
	.table {
		margin-top: 20px;
	}
	.container_item1 {
		margin: 15rpx 0 50rpx 15rpx;
	}
	.container_item {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border: 1px solid #ebeef5;
		border-right: none;
		border-bottom: none;
		.item {
			.label {
				text-align: center;
				padding: 15rpx 20rpx;
				font-weight: 500;
				border: 1px solid #ebeef5;
				border-left: none;
				border-top: none;
			}
			.content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15rpx 20rpx;
				border: 1px solid #ebeef5;
				border-left: none;
				border-top: none;
			}
		}
		.item1 {
			grid-column-start: span 2;
		}
	}

	.container_title {
		font-size: 12px;
	}
	.container_time-box {
		margin-top: 50rpx;
		border: 1px solid #ebeef5;
		border-right: none;
		border-bottom: none;
		.cell {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #ebeef5;
			border-left: none;
			border-top: none;
			padding: 15rpx 20rpx;
		}
		.header {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			.cell {
				font-weight: 500;
			}
		}
		.body {
			.container_time {
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}
	}
</style>
